<!--导航小按钮,主要用来回到首页,购物车页面-->
<!--v-if直接关掉了-->
<template>
  <div class="x">
    <div class="arrow-wrapper" v-if="true">
      <div class="button">
        <div class="arrow" @click="switchArrow" :class="{'off': is}">
          <i :class="[is ? 'cubeic-arrow': 'cubeic-back', 'active-' + active]"></i>
        </div>
        <transition name="list">
          <div class="text" v-if="is">
            <span @click="clickText('/')">首页</span>
            |
            <span @click="clickText('/category')">分类</span>
            |
            <span @click="clickText('/cart')">购物车</span>
            |
            <span @click="clickText('/center')">我的</span>
          </div>
        </transition>
      </div>
    </div>
    <div class="top" v-if="showTop">
      <top />
    </div>
  </div>
</template>

<script>
import Top from '@/components/Top'
export default {
  name: 'ArrowComponent',
  components: {
    Top
  },
  props: {
    showTop: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      // 控制开关
      is: false,
      active: 1
    }
  },
  methods: {
    // 开关
    switchArrow () {
      this.is = !this.is
    },
    clickText (url) {
      this.$router.push({ path: url })
    },
    change () {
      setTimeout(() => {
        this.active++
        if (this.active > 10) {
          this.active = 1
        }
        this.change()
      }, 500)
    }
  },
  created () {
    this.change()
  }
}
</script>

<style scoped lang="stylus">

// 定义颜色
$bg-color = $main_color
$bg-color-off = rgba(0, 0, 0, .3)
$text-color = white

.arrow-wrapper
  position fixed
  // 这里可以调整位置
  bottom 100px
  right 20px
  z-index 50
  .button
    width 40px
    height 40px
    line-height 40px
    position relative
    .arrow
      background $bg-color-off
      border-radius 50%
      box-shadow 1px 1px 2px #999;
      height 40px
      width 40px
      overflow hidden
      position relative
      i
        position absolute
        font-size 24px
        color $text-color
        transition: all 0.3s linear
        left 0
        &.active-1
          font-size 10px
          opacity 0.5
          left 15px
        &.active-2, &.active-3, &.active-4, &.active-5,
        &.active-6, &.active-7, &.active-8, &.active-9
          font-size 30px
          opacity 1
          left 5px
        &.active-10
          font-size 30px
          opacity 0
          left -30px

      &.off
        background $bg-color
        i
          &.active-2, &.active-3, &.active-4, &.active-5,
          &.active-6, &.active-7, &.active-8, &.active-9,
          &.active-1, &.active-10
            font-size 24px
            opacity 1
            left 10px
    .text
      padding  10px
      position absolute
      border-radius 5px
      left -250px
      bottom -5px
      width 220px
      height 30px
      line-height 30px
      background $bg-color
      box-shadow 3px 3px 5px #999;
      display flex
      justify-content space-around
      color $text-color
      font-weight 700
      font-size 16px
      transition: all 0.2s linear

    .list-transition
      opacity 1
    .list-enter, .list-leave
      opacity 0
      &.text
        left 0
        bottom -5px
</style>
